import React from "react";
import { Button, Card, Space } from "antd";
import AuthButton from "@/components/AuthBotton";
import { useUserStore } from "@/store/user";
import { useShallow } from "zustand/react/shallow";

const Menu3: React.FC = () => {
  const { authButtonList, authRoleList } = useUserStore(useShallow((state) => ({ authButtonList: state.authButtonList, authRoleList: state.authRoleList })));

  return (
    <Card>
      <Space direction="vertical" size="middle">
        <div>当前角色权限列表：{`[${authRoleList}]`}</div>
        <div>当前按钮权限列表：{`[${authButtonList}]`}</div>
        <Space direction="horizontal">
          <AuthButton authority={["system:user:add"]}>
            <Button color="primary" variant="solid">
              新增
            </Button>
          </AuthButton>
          <AuthButton authority={["system:user:edit"]}>
            <Button variant="outlined">编辑</Button>
          </AuthButton>
          <AuthButton authority={["system:user:delete"]}>
            <Button color="danger" variant="solid">
              删除
            </Button>
          </AuthButton>
        </Space>
      </Space>
    </Card>
  );
};

export default Menu3;
